<template>
  <div>
    <el-card shadow="never" class="aui-card--fill">
      <el-collapse-transition>
        <el-form v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <!--文本框-->
          <el-form-item>
            <el-input v-model="dataForm.tableName"
                      :placeholder="$t('sysLanguage.tableName') " readonly></el-input>
          </el-form-item>
          <!--文本框-->
          <el-form-item>
            <el-input v-model="dataForm.fieldName"
                      :placeholder="$t('sysLanguage.fieldName') " readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
            <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-transition>
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div class="mod-sys__sysLanguage">
        <vxe-table :loading="dataListLoading"
                  :data="dataList"
                  ref="xTable"
                  auto-resize
                  class="vxe-table-element"
                  @select-change="dataListSelectionChangeHandleVex"
                  @select-all="dataListSelectionAllChangeHandleVex">
          <vxe-table-column type="checkbox"  width="50"></vxe-table-column>
          <vxe-table-column field="tableName" title="sysLanguage.tableName" header-align="center" align="center">
          </vxe-table-column>
          <vxe-table-column field="tableId" title="sysLanguage.tableId" header-align="center" align="center">
          </vxe-table-column>
          <vxe-table-column field="fieldName" title="sysLanguage.fieldName" header-align="center" align="center">
          </vxe-table-column>
          <vxe-table-column field="language" title="sysLanguage.language" header-align="center" align="center">
            <template slot-scope="scope">
              {{$getDictLabel('SYS_LANGUANGE_TYPE', scope.row.language)}}
            </template>
          </vxe-table-column>
          <vxe-table-column field="fieldValue" title="sysLanguage.fieldValue" header-align="center" align="center">
          </vxe-table-column>
          <vxe-table-column title="handle" fixed="right" header-align="center" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </div>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './sysLanguage-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/sysLanguage/page',
        getDataListIsPage: true,
        deleteURL: '/sys/sysLanguage',
        deleteIsBatch: true
      },
      dataForm: {
        tableName: this.$route.params.tableName,
        tableId: this.$route.params.tableId,
        fieldName: this.$route.params.fieldName
      }
    }
  },
  activated () {
    // 通过路由参数pid, 控制列表请求操作
    if (this.$route.params.tableName) {
      this.dataForm.tableName = this.$route.params.tableName
      this.dataForm.tableId = this.$route.params.tableId
      this.dataForm.fieldName = this.$route.params.fieldName
      this.getDataList()
    } else {
      console.log('路由调转')
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.tableName = this.dataForm.tableName
        this.$refs.addOrUpdate.dataForm.tableId = this.dataForm.tableId
        this.$refs.addOrUpdate.dataForm.fieldName = this.dataForm.fieldName
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>
